<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    body {
      margin: 0;
      padding: 0;
      height: 100vh;
      background-color: black;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .circle {
      display: flex;
      font-size: 20px;
      justify-content: center;
      align-items: center;
      position: relative;
    }

    .circle::before,
    .circle::after {
      content: '';
      position: absolute;
    }

    .circle,
    .circle::before,
    .circle::after {
      --diameter: calc(10em - (var(--n) - 1) * 30%);
      width: var(--diameter);
      height: var(--diameter);
      border: 0.4em solid;
      border-color: var(--top-color) transparent var(--bottom-color) transparent;
      border-radius: 50%;
      animation: animate ease-in-out infinite alternate;
      animation-duration: var(--duration);
    }

    .circle {
      --n: 1;
      --top-color: orange;
      --bottom-color: yellow;
      --duration: 4s;
    }
    .circle::before{
      --n: 2;
      --top-color: limegreen;
      --bottom-color: cyan;
      --duration: 8s;
    }
    .circle::after{
      --n: 3;
      --top-color: blue;
      --bottom-color: pink;
      --duration: 16s;
    }
    @keyframes animate {
      to{
        transform: rotate(4turn);
      }
    }
  </style>
</head>
<body>
<div class="circle"></div>
</body>
</html>
